<template>
  <div class="payment">
    <div class="header">
      <p></p>
      <h1>我要支付</h1>
      <div class="img">
          <van-button type="primary" @click="show = true" />
          <van-overlay :show="show" @click="show = false">
            <div class="wrapper">
              <div class="block">
                <ul>
                  <li>
                    <div class="img1"></div>
                    <div class="word">
                      <p>在线客服</p>
                      <span>09:00-21:00</span>
                    </div>
                  </li>
                  <li>
                    <div class="img2"></div>
                    <div class="word">
                      <p>电话客服</p>
                      <span>020-86338888(09:00-18:00)</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </van-overlay>
        </div>
    </div>

    <div class="bg" v-if="!lislength">
      <div class="img">
        <img src="../assets/img/zhifu.png" alt="" />
      </div>
      <router-link tag="div" to="/login" class="word" v-show="!flag">
        <span >登录查看订单</span>
      </router-link>
      <p v-show="flag">目前没有订单</p>
    </div>

    <router-link
      tag="div"
      :to="'/page?id=' + item.id"
      class="items"
      v-for="item in lists"
      :key="item.id"
    >
      <div class="img">
        <img :src="item.imgs" alt="" />
        <span>跟团游|广州出发</span>
      </div>
      <div class="word">
        <div class="top">
          {{ item.title }}
        </div>
        <div class="mid">
          <span v-show="item.name">{{ item.name }}</span>
        </div>
        <div class="bottom">
          <div class="num">
            共{{ item.totalnum }}人
            <p>{{ item.pnum }}成人</p>
            <p v-if="item.childrennum > 0">{{ item.childrennum }}儿童</p>
            <p v-if="item.babynum > 0">{{ item.babynum }}婴儿</p>
          </div>
          <span><i>￥</i>{{ item.total }}</span>
        </div>
            <span class="data">出发日期：{{item.tiems}}</span>
        <div class="low">
          <div class="left">
            <p @click.stop="del(item.id)"  v-if="!item.payshow">取消订单</p>
          </div>
          <div class="right">
            <p @click.stop="pay(item.id)" v-if="!item.payshow">去支付</p>
            <p v-if="item.payshow">已支付</p>
          </div>
        </div>
      </div>
    </router-link>

    <footer>
      <ul>
        <router-link tag="li" to="/home">
          <div class="img"></div>
          <p class="word">首页</p>
        </router-link>
        <router-link tag="li" to="/trip">
          <div class="img"></div>
          <p class="word">行程</p>
        </router-link>
        <router-link tag="li" to="/payment" class="con">
          <div class="img"></div>
          <p class="word">支付</p>
        </router-link>
        <router-link tag="li" to="/my">
          <div class="img"></div>
          <p class="word">我的</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: null,
      totalnum: 0,
      total: 0,
      lislength: 0,
      flag:false,
      show:false
      // payshow:false,
    };
  },
  methods: {
    //取消订单
    del(id) {
      let index = this.lists.findIndex((item) => item.id == id);
      this.lists.splice(index, 1);
      this.lislength = this.lists.length;
      console.log(index);
      // window.localStorage.removeItem("pay",index);
      this.$toast("取消成功");
    },
    //去支付
    pay(id){
      let index = this.lists.findIndex((item)=>item.id==id);
      this.lists[index].payshow = true;
      console.log(this.lists[index]);
      window.localStorage.setItem("pay",JSON.stringify(this.lists));
      this.$toast('支付成功');
    }
  },
  watch: {
    lislength: {
      handler() {
        window.localStorage.setItem("pay", JSON.stringify(this.lists));
        if(this.lists.length==0){
          window.localStorage.removeItem("pay");
        }
      },
      deep: true,
    },
  },
  created() {
    this.lists = JSON.parse(window.localStorage.getItem("pay"));
    console.log(this.lists);
    if(this.lists){
      this.lislength = this.lists.length;
    }

    if (this.lists) {
      this.lists.forEach((item) => {
        item.totalnum = item.pnum + item.childrennum + item.babynum;
        this.total = item.total;
      });
    }
    if(window.localStorage.token){
      this.flag = true;
    }else{
      this.flag = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.payment {
  .header {
    height: 44px;
    line-height: 44px;
    background: #ffd800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h1 {
      text-align: center;
      font-weight: normal;
      font-size: 16px;
      margin-left: 10px;
    }
    .img {
      width: 20px;
      height: 22px;
      background: url(../assets/img/erji.png) no-repeat 1px 0;
      background-size: 250px;
      ::v-deep .van-button--normal {
        padding: 0;
        background: transparent;
        border: 1px solid transparent;
      }
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .block {
        width: 279px;
        height: 134px;
        border-radius: 8px;
        background-color: #fff;
        padding: 0 0 0 20px;
        ul {
          display: flex;
          flex-direction: column;
          li {
            padding: 16px 0;
            display: flex;
            height: 35px;
            width: 100%;
            border-bottom: 1px solid #ebebeb;
            align-items: center;
            &:last-child {
              border: none;
            }
            .img1 {
              width: 34px;
              height: 34px;
              margin-right: 10px;
              background: url(../assets/img/common.png) no-repeat -325px -546px;
              background-size: 400px;
            }
            .img2 {
              width: 34px;
              height: 34px;
              margin-right: 10px;
              background: url(../assets/img/common.png) no-repeat -367px -546px;
              background-size: 400px;
            }
            .word {
              p {
                height: 16px;
              }
              span {
                color: #999;
                font-size: 12px;
                transform: scale(0.8);
              }
            }
          }
        }
      }
    }
  }
  .bg {
    .img {
      width: 220px;
      height: 140px;
      margin: 48px 78px;
      img {
        width: 100%;
      }
    }
    .word {
      margin: 0 auto;
      border-radius: 22px;
      text-align: center;
      width: 240px;
      height: 44px;
      line-height: 44px;
      background: #ffd800;
    }
    p {
      text-align: center;
      margin: 16px 0;
    }
  }
  .items {
    padding: 10px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    &:last-of-type {
      border: none;
    }
    .img {
      width: 150px;
      height: 100px;
      position: relative;
      img {
        width: 100%;
      }
      span {
        display: block;
        position: absolute;
        top: 2px;
        left: 4px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        border: 1px solid transparent;
        border-radius: 20px;
        font-size: 12px;
        padding: 2px 4px;
      }
    }
    .word {
      margin-left: 10px;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      height: 110px;
      .top {
        color: #000;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        white-space: initial;
        height: 40px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-top: 2px;
      }
      .mid {
        span {
          border: 1px solid #00b9ef;
          color: #00b9ef;
          font-size: 12px;
          transform: scale(0.8);
          border-radius: 20px;
          padding: 3px;
          margin-right: 5px;
        }
      }
      .bottom {
        margin-right: 5px;
        display: flex;
        justify-content: space-between;
        .num {
          display: flex;
          align-items: center;
          p {
            font-size: 12px;
          }
        }
        span {
          color: #ff8c00;
          font-size: 20px;
          i {
            font-style: normal;
            font-size: 12px;
          }
        }
      }
      // .data{
      //   color: #f9355c;
      // }
      .low {
        display: flex;
        justify-content: space-between;
        div {
          font-size: 12px;
          p{
            border: 1px solid #000;
            border-radius: 11px;
            padding: 3px 6px;
          }
        }
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    ul {
      display: flex;
      li {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 12px;
        color: #707070;
        &.con {
          .word {
            color: #242424;
          }
        }
        .img {
          width: 26px;
          height: 26px;
          background: url(../assets/img/common.png) no-repeat -115px -243px;
          background-size: 400px;
        }
        &:nth-of-type(2) {
          .img {
            background-position: -153px -243px;
          }
        }
        &:nth-of-type(3) {
          .img {
            background-position: -191px -280px;
          }
        }
        &:nth-of-type(4) {
          .img {
            background-position: -227px -243px;
          }
        }
      }
    }
  }
}
</style>
